<template>
  <el-dialog
    custom-class="tenant_configure_dialog"
    :title="dialogTitle"
    :visible="dialogVisible"
    width="50%"
    :before-close="handleClose"
    v-dialogDrag
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="命令下发" name="command-delivery"></el-tab-pane>
        <el-tab-pane label="事件源" name="event-sources"></el-tab-pane>
      </el-tabs>
      <div>
        <Command
          :key="activeName"
          :activeName="activeName"
          ref="commandRef"
        ></Command>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" size="small">取 消</el-button>
      <el-button
        :loading="btnLoading"
        type="primary"
        @click="submit"
        size="small"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import Command from "./Command";
import { CONFIG_DATA } from "../constant";
export default {
  components: {
    Command,
  },

  props: {
    configToken: {
      type: String,
      default: "",
    },
    dialogTitle: {
      type: String,
      default: "配置",
    },
    dialogVisible: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      activeName: CONFIG_DATA[0].name, //命令下发 command-delivery   事件源  event-sources
      btnLoading: false,
    };
  },
  methods: {
    handleClick() {
      console.log("this.activeName :>> ", this.activeName);
      this.$store
        .dispatch("tenantConfigCommand/getTenantConfigCommand", {
          token: this.configToken,
          activeName: this.activeName,
        })
        .then((res) => {
          this.configDialogVisible = true;
        });
    },
    handleClose() {
      this.$emit("update:dialogVisible", false);
    },
    submit() {
      this.$refs.commandRef.submit(() => {
        this.$confirm("全局配置仅生效一次,确认提交吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          console.log("回调验证通过提交");
          this.btnLoading = true;
          this.$store
            .dispatch("tenantConfigCommand/submit", this.configToken)
            .then((res) => {
              this.btnLoading = false;
              this.$msg({
                message: "提交成功",
                type: "success",
              });
              console.log("res :>> ", res);
              this.handleClose();
              // 关闭列表
              this.$refs.commandRef.activeNames = [];
            })
            .catch((err) => {
              this.btnLoading = false;
            });
        });
      });
      // this.handleClose();
    },
  },
};
</script>

<style lang="scss" >
.tenant_configure_dialog {
  .el-dialog__footer {
    padding: 18px 18px;
    border-top: 0;
  }
  .el-dialog__body {
    /* padding-bottom: 18px; */
  }
  .el-tabs__header {
    margin-bottom: 0;
  }
}
</style>
